<template>
  <div class="tabs-view">
    <div class="flexBox">
      <div style="display: flex">
        <el-form ref="queryForm" :rules="rules" :inline="true" :model="queryForm" class="query-form-item">
          <el-form-item label="单据编号：" prop="documentNumber">
            <el-input v-model="queryForm.documentNumber" placeholder="请输入" />
          </el-form-item>
          <el-form-item
            label="金额："
            prop="minAmount"
            style="margin-left: 20px"
          >
            <el-input
              v-model="queryForm.minAmount"
              class="w100"
              placeholder="最小金额"
            />
          </el-form-item>
          <span class="amount-line">-</span>
          <el-form-item
            label=""
            prop="maxAmount"
          >
            <el-input
              v-model="queryForm.maxAmount"
              class="w100"
              placeholder="最大金额"
            />
          </el-form-item>
        </el-form>
        <HlBtnGroup
          :config="queryConfig"
          @handleQuery="handleQuery"
          @handleClearQuery="handleClearQuery"
        />
      </div>
      <HlBtnGroup
        :config="operateConfig"
        @handleCreate="handleCreate"
      />
    </div>
    <HlTable
      ref="hlTable"
      :loading="loading"
      :tab-key="tabKey"
      :config="tableConfig"
      :table-data="tableData"
      @handlePageChange="handlePageChange"
    >
      <template slot="code" slot-scope="scope">
        <el-link
          type="primary"
          :underline="false"
        >
          {{ scope.row.code }}
        </el-link>
      </template>
      <template slot="operate" slot-scope="scope">
        <HlBtnGroup
          :config="buttonConfig"
          @handleDelete="handleDelete(scope.row)"
        />
      </template>
    </HlTable>
  </div>
</template>

<script>
const validator = /^[0-9]+(\.[0-9]*)?$/
const validatorRule = [
  {
    validator: (rule, value, callback) => {
      if (value && !validator.test('' + value)) {
        callback(new Error('金额必须为数字值'))
      }
    },
    trigger: 'blur'
  }
]
import HlTable from '@/components/HlTable'
import HlBtnGroup from '@/components/HlBtnGroup'
export default {
  components: {
    HlTable,
    HlBtnGroup
  },
  props: {
    tabKey: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      tableData: [
        { company: '华龙', code: 'YW202109010006' }
      ],
      rules: {
        minAmount: validatorRule,
        maxAmount: validatorRule
      },
      queryConfig: {
        isGroup: false,
        buttonList: [
          { name: '查询', type: 'primary', affairs: 'Query' },
          { name: '清空', type: 'danger', affairs: 'ClearQuery' }
        ]
      },
      operateConfig: {
        buttonList: [
          { name: '新增', type: 'primary', affairs: 'Create', icon: 'el-icon-plus' }
          // { name: '编辑', type: 'text', affairs: 'Edit' },
          // { name: '明细', type: 'text', affairs: 'Detail' },
          // { name: '删除', type: 'text', affairs: 'Delete' },
          // { name: '复制', type: 'text', affairs: 'Copy' },
          // { name: '补录发票', type: 'text', affairs: 'Invoice' },
          // { name: '催办', type: 'text', affairs: 'Urging' },
          // { name: '打印', type: 'text', affairs: 'Print' }
        ]
      },
      queryForm: {
        tabKey: this.tabKey,
        documentNumber: '',
        minAmount: '',
        maxAmount: ''
      },
      tableConfig: {
        columnList: [
          { prop: 'company', name: '公司', width: '180px' },
          { prop: 'code', name: '单据编号', width: '160px', slot: true },
          { prop: 'applicant', name: '申请人', width: '160px' },
          { prop: 'agent', name: '代理人', width: '160px' },
          { prop: 'department', name: '部门', width: '160px' },
          { prop: 'createTime', name: '申请日期', width: '160px' },
          { prop: 'shortName', name: '申请人', width: '160px' },
          { prop: 'operate', name: '操作', width: '180px', fixed: 'right', slot: true }
        ]
      },
      buttonConfig: {
        isGroup: false,
        dropdownType: 'text',
        buttonList: [
          { name: '编辑', type: 'text', affairs: 'Edit' },
          { name: '明细', type: 'text', affairs: 'Detail' },
          { name: '删除', type: 'text', affairs: 'Delete' },
          { name: '复制', type: 'text', affairs: 'Copy' },
          { name: '补录发票', type: 'text', affairs: 'Invoice' },
          { name: '催办', type: 'text', affairs: 'Urging' },
          { name: '打印', type: 'text', affairs: 'Print' }
        ]
      }
    }
  },
  created() {
    this.loading = true
    setTimeout(() => {
      console.log('模拟查询数据传递')
      this.loading = false
      this.tableData = [
        { company: '华龙2222', code: 'YW202109010006' }
      ]
    }, 5000)
  },
  methods: {
    handleCreate() {
      this.$router.push('/reimburse/companyManagement/universal/create')
    },
    handlePageChange(value) {
      console.log(value)
    },
    handleQuery() {
      console.log(this.queryForm)
    },
    handleClearQuery() {
      this.$refs['queryForm'].resetFields()
    },
    handleDelete(row) {
      console.log(row)
    },
    hlTable() {
      this.$refs['hlTable'].tableLayout()
    }
  }
}
</script>

<style scoped>
.amount-line {
  line-height: 32px;
  display: inline-block;
  margin-right: 10px;
}
.query-form-item /deep/ .el-form-item__label {
  padding-right: 0;
}
</style>
